﻿@using Models;
@model List<expert>

@{
    ViewBag.Title = "专家评分墙";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<link href="~/Areas/Admin/HTML/css/screen.css?v=(@DateTime.Now.ToString("yyyyMMddHHmmssffff"))" rel="stylesheet" />
<div class="screen-content">
    <div class="screen-header">
        <h1 style="line-height:100px;letter-spacing:5px;"><img style="margin-right: 10px;" src="~/Areas/Admin/HTML/screenimgs/icon-expert.png" />专家评分</h1>
        <img class="qr-code" src="/Areas/Admin/HTML/screenimgs/QRcode.jpg?v=1" onclick="showImg(this)" />
    </div>
    <div class="expert-out-content">
        <div class="expert-content-bar"></div>
        <div class="expert-content">
            <ul class="expert-list">
                @foreach (var item in Model)
                {
                    <li id="expert-@item.id" class="@(item.isdeleted?"display-none":"")">
                        <div class="avator">
                            <img id="avatar-@item.id" src="@(string.IsNullOrWhiteSpace(item.avatar)?"/Areas/Admin/HTML/screenimgs/avator.png":item.avatar)" />
                        </div>
                        <p class="name">
                            @item.name
                            <small> @item.position</small>
                        </p>
                        <p class="score-status@(item.IsScored?" scored":"")">@(item.IsScored ? "已评分" : "未评分")</p>
                    </li>
                }
            </ul>
        </div>
    </div>
</div>
<script>
    $(function () {
        setInterval(function () {
            $.get('/admin/screen/expertwall', null, function (res) {
                if (res.status) {
                    var data = res.data;
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].isdeleted) {
                            $('#expert-' + data[i].id).addClass("display-none");
                        } else {
                            $('#expert-' + data[i].id).removeClass("display-none");
                            var expert = $('#expert-' + data[i].id);
                            var avatar = (data[i].avatar != null && typeof (data[i].avatar) != "undefined" && data[i].avatar.length > 0) ? data[i].avatar : "/Areas/Admin/HTML/screenimgs/avator.png";
                            var scoreClass = data[i].IsScored ? " scored" : "";
                            var scoreText = data[i].IsScored ? "已评分" : "未评分";
                            var c = data[i].isdeleted ? 'display-none' : '';
                            if (expert.length == 0) {
                                $(".expert-list").append('<li class="' + c + '" id=\"expert-' + data[i].id + '\"> <div class=\"avator\"> <img src=\"' + avatar + '\" /> </div><p class=\"name\">' + data[i].name + '<small> ' + data[i].position + '</small></p> <p class=\"score-status' + scoreClass + '\">' + scoreText + '</p> </li>');
                            } else {
                                if (data[i].IsScored) {
                                    $('#expert-' + data[i].id).find(".score-status").addClass("scored").text("已评分");
                                } else {
                                    $('#expert-' + data[i].id).find(".score-status").removeClass("scored").text("未评分");
                                }
                                if (avatar) {
                                    $('#avatar-' + data[i].id).attr("src", avatar);
                                }
                            }
                        }
                    }
                }
                else {
                    alert(res.errmsg)
                }
            });
        }, 3000);
    });

    function showImg(target) {
        var img = $(target).attr("src");
        layer.open({
            type: 1,
            offset: '20px',
            title: false,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 1, //不显示关闭按钮
            shadeClose: true, //开启遮罩关闭
            area: ['700px', '700px'],
            content: '<img src="' + img + '" width="100%"/>'
        });
    }
</script>